/**
* @description: 去执行组件
* @author: JiWei
* @date:
**/
<template>
  <view class="approval-wrap">
    <view class="approval-inner">
      <view class="approval-result">
        <van-form ref="ruleForm">
          <van-field v-model="beginTime" name="beginTime" label="实际进入时间" readonly placeholder="选择实际进入时间"
                     input-align="right" right-icon="arrow" required error-message-align="right"
                     @click="onOpenPicker('beginTime')" :rules="[{ required: true, trigger:'onChange'}]" />
          <van-field v-model="endTime" name="endTime" label="实际离开时间" readonly placeholder="选择实际离开时间"
                     input-align="right" right-icon="arrow" required error-message-align="right"
                     @click="onOpenPicker('endTime')" :rules="[{ required: true, trigger:'onChange'}]" />
        </van-form>
        <!--时间选择器-->
        <van-popup v-model="showPicker" position="bottom">
          <van-datetime-picker :type="datepickertype" :formatter="formatter"  cancel-button-text="清空"
                               @confirm="onDatetimeConfirm" @cancel="onDatetimeEmpty" v-model="currentDate"
                               :min-date="minDate" />
        </van-popup>
      </view>

      <view class="approval-submit">
        <van-button block native-type="submit" @click="submitExecute">确认</van-button>
      </view>
    </view>
  </view>
</template>
<script>
import moment from "moment/moment";
import {Dialog, Toast} from "vant";
export default {
  name: 'toExecute',
  components: { },
  props: {},
  data() {
    return {
      beginTime: '',
      endTime: '',
      timeString: '',
      currentDate: '',
      minDate: new Date(0),
      datepickertype: 'datetime',
      showPicker: false,
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    formatter(type, val) {
      if (type === 'year') return val + '年'
      if (type === 'month') return val + '月'
      if (type === 'day') return val + '日'
      if (type === 'hour') return val + '时'
      if (type === 'minute') return val + '分'
    },
    onDatetimeConfirm(time) {
      let timeString = "";
      timeString = this.datepickertype == "datetime" ? moment(time).format('YYYY-MM-DD HH:mm') : moment(time).format(
          'YYYY-MM')


      if (this.pickerType === 'beginTime') {
        this.beginTime = timeString
        if (
            this.endTime !== '' &&
            new Date(this.endTime).getTime() < new Date(this.beginTime).getTime()
        ) {
          Dialog.alert({
            message: '实际进入时间不可晚于实际离开时间',
            theme: 'round-button'
          })
          this.beginTime = ''
        }
      } else if (this.pickerType === 'endTime') {
        this.endTime = timeString
        if (
            this.beginTime !== '' &&
            new Date(this.endTime).getTime() < new Date(this.beginTime).getTime()
        ) {
          Dialog.alert({
            message: '实际离开时间不可早于实际进入时间',
            theme: 'round-button'
          })
          this.endTime = ''
        }
      }
      this.showPicker = false
    },
    onDatetimeEmpty() {
      this.showDatetimePicker = false
      this.pickerType === 'beginTime' && (this.beginTime = '')
      this.pickerType === 'endTime' && (this.endTime = '')
    },

    onOpenPicker(pickerType) {
      if (pickerType === 'beginTime') {
        this.currentDate = this.beginTime !== '' ? new Date(this.beginTime) : new Date()
      } else if (pickerType === 'endTime') {
        this.currentDate =
            this.endTime !== '' ? new Date(this.endTime) : new Date()
      }
      this.pickerType = pickerType
      this.showPicker = true
    },
    async submitExecute() {
      await this.$refs.ruleForm.validate().then(() => {
        this.$emit('submitExecute', {beginTime:this.beginTime,endTime:this.endTime})
      }).catch(() => {
        Toast('请完善内容');
      })
    }
  }
};
</script>
<style scoped lang="scss">
.approval-wrap {
  width: calc(100vw - #{px2vw(60)});
  height: px2vh(1000);
  padding: px2vh(60) px2vw(30) 0 px2vw(30);
  .approval-inner {
    width: 100%;
    .approval-result {
      margin-top: px2vh(80);
      width: 100%;
      height: px2vh(720);
      margin-bottom: px2vh(40);
    }

    .approval-submit {
      width: 100%;
      margin-bottom: px2vh(40);
      /deep/ .van-button {
        height: px2vh(120);
        color: #fff;
        background-color: #417ADC;
        border: 1px solid #417ADC;
        border-radius: px2vh(60);
        width: calc(100% - #{px2vw(4)});
      }
    }
  }
}
</style>
